<template>
  <div class="aside-box">
    <div class="aside-logo">
      <img src="../../../public/favicon.ico" alt="" />
      <el-text>{{ system.title }}</el-text>
    </div>

    <el-scrollbar>
      <el-menu :default-active="$route.path" router background-color="#4b4b4b" text-color="#ffffff">
        <menu-item :menu-arr="pageMenu" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useStore } from '@/stores'
import { system } from '@/config'
import MenuItem from '@/components/aside/MenuItem.vue'
const { pageMenu } = storeToRefs(useStore())
</script>

<style scoped lang="scss">
.aside-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .aside-logo {
    width: 100%;
    height: 40px;
    flex: 0 0 auto;
    background-color: #353535;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .el-text {
      font-size: 16px;
      color: white;
      line-height: 0;
    }
  }
}
</style>

<style lang="scss">
$el-menu-level-padding: 10px;
.aside-box {
  .el-menu {
    border-right: 0 !important;
    .el-menu-item {
      padding-left: calc(
        var(--el-menu-base-level-padding) + var(--el-menu-level) *
          (var(--el-menu-level-padding) - $el-menu-level-padding)
      ) !important;
    }
    .el-sub-menu__title {
      padding-left: calc(
        var(--el-menu-base-level-padding) + var(--el-menu-level) *
          (var(--el-menu-level-padding) - $el-menu-level-padding)
      ) !important;
    }
  }
}
</style>
